<template>
    <div>
        <div style="display: flex;width: 75%;background-color: white;margin: 30px auto; border-radius: 20px;">
            <div style="flex: 1;padding: 0 20px;">
                <div style="font-size: 18px;color: #000000FF;line-height: 80px;border-bottom: #cccccc 1px solid;">{{
                    typeData.name }}</div>
                <div style="margin: 20px 0;">
                    <el-row :gutter="20">
                        <el-col :span="6" style="margin-bottom: 20px;" v-for="item in goodData">
                            <img @click="navGo('/GoodsInfo?id=' + item.id)" :src="item.img"
                                style="width: 100%;height: 275px;border-radius: 10px;border: #cccccc 1px solid;" alt="">
                            <div
                                style="margin-top: 10px;font-weight: bold;font-size: 20px;width: 240px;color: #000000FF;text-overflow: ellipsis;overflow: hidden;white-space: nowrap">
                                {{ item.name }}</div>
                            <div style="margin-top: 5px;font-size: 24px;color:#FF5000FF">￥{{ item.price }}/{{ item.unit }}</div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div style="width: 300px;border-left: #cccccc 1px solid;padding: 0 20px;">
                <div style="font-size: 18px;color: #000000FF;line-height: 80px;border-bottom: #cccccc 1px solid;">猜你喜欢</div>
                <div style="margin: 20px 0;">
                    <div style="margin-bottom: 20px;" >
                        <img  src="@/assets/img/yifu.jpg"
                                style="width: 100%;height: 275px;border-radius: 10px;border: #cccccc 1px solid;" alt="">
                            <div
                                style="margin-top: 10px;font-weight: bold;font-size: 20px;width: 240px;color: #000000FF;text-overflow: ellipsis;overflow: hidden;white-space: nowrap">
                                冬季超值保暖卫衣</div>
                            <div style="margin-top: 5px;font-size: 24px;color:#FF5000FF">￥44/件</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { selectGoodsByType, selectOne } from "../../api/index";

export default {
    data() {
        return {
            typeId: this.$route.query.id,
            goodData: [],
            typeData: {},
        }
    },
    created() {
        console.log(this.typeId);
        selectGoodsByType("goods", this.typeId).then(res => {
            if (res.code === 200) {
                this.goodData = res.data;
            } else {
                this.$message.error(res.message);
            }
        }),
            selectOne("type", this.typeId).then(res => {
                if (res.code === 200) {
                    this.typeData = res.data;
                } else {
                    this.$message.error(res.message);
                }
            })

    },
    methods: {
        navGo(url){
            this.$router.push(url);
        }
    }
}

</script>

<style>
body {
    background-color: #efebeb
}
a:hover {
    color: red;
}
a {
    text-decoration: none;
    color: #666666
}
</style>